<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加角色' : '编辑角色'" width="45%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="角色名称：">
					<el-input v-model="form.roleName" placeholder="输入角色名称" style="min-width: 300px"></el-input>
				</el-form-item>

				<el-divider />

				<div v-loading="loading" style="position: relative">
					<el-tree
						ref="tree"
						:data="treeData"
						check-on-click-node
						:expand-on-click-node="false"
						:props="defaultProps"
						default-expand-all
						show-checkbox
						@check-change="checkChange"
						node-key="menuCode"
						:default-checked-keys="checkedKeys"
					/>
					<div class="select_all" @click="selectAll(!checkedAll)">
						<el-checkbox v-model="checkedAll" @change="selectAll" />
						<text style="margin-left: 5px">全选/取消</text>
					</div>
				</div>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import { getEmnuList, addRole } from '/@/api/api';

const form = ref({});
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

const checkedAll = ref(false);
const dialogVisible = ref(false);
var menuCode = '';
const treeData = ref([]);
const checkedKeys = ref([]);
const tree = ref();
const defaultProps = {
	id: 'id',
	children: 'menuList',
	label: 'menuName',
	menuCode: 'menuCode',
	class: 'treeItemClass',
};

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			if (!props.isAdd) {
				form.value = JSON.parse(JSON.stringify(props.row));
			}

			getEmnuListFn();
		}
	}
);

async function getEmnuListFn() {
	loading.value = true;
	let { code, data } = await getEmnuList({});
	loading.value = false;
	if (code == 200) {
		let list = data.list;

		treeData.value = list;

		//如果是编辑页面要把角色拥有的菜单勾上
		if (!props.isAdd) {
			menuCode = props.row.menuCode;
			if (props.row && props.row.menuCode) {
				let codes = props.row.menuCode.split(',');
				codes.forEach((item) => {
					checkedKeys.value.push(item);
				});
			}
		}
	}
}
//处理选中数据
function checkData(menuCode: String, checked: Boolean) {
	if (checked) {
		checkedKeys.value.push(menuCode);
		let set = new Set(checkedKeys.value);
		checkedKeys.value = Array.from(set);
	} else {
		checkedKeys.value.forEach((element, index) => {
			if (element == menuCode) {
				checkedKeys.value.splice(index, 1);
			}
		});
	}
}

//单个菜单勾选
function checkChange(menu: any, checked: Boolean) {
	if (menu.menuList && menu.menuList.length > 0) {
	} else {
		checkData(menu.menuCode, checked);

		menuCode = '';
		checkedKeys.value.forEach((element, index) => {
			if (checkedKeys.value.length - 1 == index || !element) {
				menuCode = menuCode + element;
			} else {
				menuCode = menuCode + element + ',';
			}
		});
	}
}

//全选
function selectAll(checked) {
	checkedAll.value = checked;
	treeData.value.forEach((item) => {
		if (item.menuList && item.menuList.length > 0) {
			item.menuList.forEach((childItem: any) => {
				checkData(childItem.menuCode, checked);
				tree.value.setChecked(childItem.menuCode, checked);
			});
		}
	});
}

async function submit() {
	let { code, data } = await addRole({
		...form.value,
		menuCode,
	});
	if (code == 200) {
		ElMessage.success('操作成功');
		handleClose();
	}
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	menuCode = '';
	checkedKeys.value = [];
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}

.el-tree-node__content {
	height: 40px;
}

.select_all {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 30px;
	cursor: pointer;
	/* border: 1px solid #ececec;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px;
	height: 35px; */
}
</style>
